<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Pay form</h3>
    </div>
    <div class="panel-body">
        <form action="" class="form-horizontal" method="post">
            <div class="col-md-8">
                
                <fieldset>

                    <div class="form-group ${empty form.erreurs['fname'] ? '': 'has-error'}">
                        <label class="control-label col-sm-3" for="fname">First Name</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" id="fname" name="fname" value="<c:out value="${user.firstname}"/>" size="20" maxlength="16" disabled/>
                            <c:if test="${!empty form.resultat}">
                                <span class="help-block">${empty form.erreurs['fname'] ? 'Success': form.erreurs['fname']}</span>
                            </c:if>
                        </div>
                    </div>
                
                    <div class="form-group ${empty form.erreurs['lname'] ? '': 'has-error'}">
                        <label class="control-label col-sm-3" for="lname">Last Name</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" id="lname" name="lname" value="<c:out value="${user.lastname}"/>" size="20" maxlength="16" disabled />
                            <c:if test="${!empty form.resultat}">
                                <span class="help-block">${empty form.erreurs['lname'] ? 'Success': form.erreurs['lname']}</span>
                            </c:if>
                        </div>
                    </div>
                        
                    <div class="form-group ${empty form.erreurs['email'] ? '': 'has-error'}">
                        <label class="control-label col-sm-3" for="lname">Email</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" id="email" name="email" value="<c:out value="${user.email}"/>" size="20" maxlength="16" disabled />
                            <c:if test="${!empty form.resultat}">
                                <span class="help-block">${empty form.erreurs['email'] ? 'Success': form.erreurs['email']}</span>
                            </c:if>
                        </div>
                    </div>
                        
                    <div class="form-group ${empty form.erreurs['phone'] ? '': 'has-error'}">
                        <label class="control-label col-sm-3" for="phone">Phone number</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" id="phone" name="phone" value="<c:out value="${user.phone}"/>" size="20" maxlength="16" disabled />
                            <c:if test="${!empty form.resultat}">
                                <span class="help-block">${empty form.erreurs['phone'] ? 'Success': form.erreurs['phone']}</span>
                            </c:if>
                        </div>
                    </div>
                        
                    <div class="form-group ${empty form.erreurs['address'] ? '': 'has-error'}">
                        <label class="control-label col-sm-3" for="address">Address</label>
                        <div class="col-sm-6">
                            <textarea class="form-control" rows="3" id="address" name="address">${user.address}</textarea>	
                            <c:if test="${!empty form.resultat}">
                                <span class="help-block">${empty form.erreurs['address'] ? 'Success': form.erreurs['address']}</span>
                            </c:if>
                        </div>
                    </div>
                        
                    <div class="form-group ${empty errors['card_type'] ? '': 'has-error'}">
                        <label class="control-label col-sm-3" for="card_type">Card Type</label>
                        <div class="col-sm-4">
                            <select class="form-control" id="card_type" name="card_type" required="required">
                                <option value="visa">Visa</option>
                                <option value="mastercard">MasterCard</option>
                            </select>
                        </div>
                    </div>    
                 
                    <div class="form-group ${empty errors['card_number'] ? '': 'has-error'}">
                        <label class="control-label col-sm-3" for="card_number">Card Number</label>
                        <div class="col-sm-4">
                            <input class="form-control" type="text" id="card_number" name="card_number" value="<c:out value="${card_number}"/>" size="20" maxlength="16" required/>
                            <c:if test="${!empty errors}">
                                <span class="help-block">${empty errors['card_number'] ? 'Success': errors['card_number']}</span>
                            </c:if>
                        </div>
                    </div>
                    
                    <div class="form-group ${empty errors['card_expiration'] ? '': 'has-error'}">
                        <label class="control-label col-sm-3" for="card_expiration">Expiration date</label>
                        <div class="col-sm-4">
                            <input type="month" class="form-control" id="card_expiration_month" name="card_expiration" value="${card_expiration}">
                        </div>
                            <c:if test="${!empty errors}">
                                <span class="help-block">${empty errors['card_expiration'] ? 'Success': errors['card_expiration']}</span>
                            </c:if>   
                    </div>
                        
                    <div class="form-group ${empty errors['card_crypt'] ? '': 'has-error'}">
                        <label class="control-label col-sm-3" for="card_crypt">Card Crypt</label>
                        <div class="col-sm-2">
                            <input class="form-control" type="text" id="card_crypt" name="card_crypt" value="<c:out value="${card_crypt}"/>" size="20" maxlength="3" required/>  
                            <c:if test="${!empty errors}">
                                <span class="help-block">${empty errors['card_crypt'] ? 'Success': errors['card_crypt']}</span>
                            </c:if>
                        </div>
                    </div>
                        
                    <div class="form-group">
                        <div class=" col-sm-offset-3 col-sm-3">
                            <button type="submit" name="checkoutPurchase" class="btn btn-default"><span class="glyphicon glyphicon-euro"></span> Pay</button>
                        </div>
                    </div> 
                </fieldset>
            </div>
                    
            <div class="col-md-4">
                <div class="form-group">
                    <div>
                        <label>
                            <input type="radio" name="delivery" id="delivery1" value="standard" onchange="changeShipCost()" checked>
                            Standard International Shipping (averages 18-32 business days).
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="radio" name="delivery" id="delivery2" value="express" onchange="changeShipCost()">
                            Express International Shipping (averages 9-16 business days).
                        </label>
                    </div>
                    <div>
                        <label> 
                            <input type="radio" name="delivery" id="delivery3" value="oneday" onchange="changeShipCost()">
                            OneDay Priority Shipping - On your doorstep tomorrow before 1:00 PM.
                        </label>
                    </div>     
                </div>
    
            <div id="totalPrice">
                Item total : <label id="totalp" name="totalp"><c:out value="${cart.total}"/></label> &euro;<br>
                Shipping :  <label id="totals" name="totals">2.00</label> &euro;<br>
                Total : <label id="totalo" name="totalo"><c:out value="${cart.total + 2.00}"/></label> &euro;<br>
            </div>
         </div>
    </form>
</div>
</div>

<script src="bootstrap/js/jquery.js"></script>            
<script type="text/javascript">
    function changeShipCost()
    {
        rb1 = document.getElementById("delivery1");
        rb2 = document.getElementById("delivery2");
        rb3 = document.getElementById("delivery3");
        if(rb1.checked)
        {
            document.getElementById("totals").innerHTML = '2.00';
        }
        else if(rb2.checked)
        {
            document.getElementById("totals").innerHTML = '5.00';
        }
        else if(rb3.checked)
        {
            document.getElementById("totals").innerHTML = '9.00';
        }
        var totalo = document.getElementById("totalp").textContent;
        var totals = document.getElementById("totals").textContent;
        
        document.getElementById("totalo").innerHTML = parseFloat(totalo) + parseFloat(totals);
    }
</script>
